<!-- 
    头部面包屑
    emit
    isCollapse--点击修改左侧菜单栏折叠状态
 -->
<template>
    <div class="breadcrumb">
        <a href="javascript:void(0)" class="show_hide" :title="isCollapse ? '展开' : '折叠'"
            @click="isCollapse = !isCollapse">
            <el-icon :size=28 color="#6B7580" :style="{ transform: 'rotate(' + (isCollapse ? -180 : 0) + 'deg' }">
                <Fold />
            </el-icon>
        </a>
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item v-if="$route.fullPath != '/index/home'" :to="{ path: '/index/home' }">{{$t('home')}}</el-breadcrumb-item>
            <template v-for="item in $route.matched.slice(1)" :key="item.name">
                <template v-if="item.name !== 'home'">
                    <el-breadcrumb-item>{{( $t(item.meta.title as string))}}</el-breadcrumb-item>
                </template>
            </template>
        </el-breadcrumb>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { ArrowRight, Fold } from '@element-plus/icons-vue'//引入图标

const isCollapse = ref(false)
const emit = defineEmits<{ (e: 'changeCollapse', isCollapse: boolean): void }>()//子传父自定义事件

watch(isCollapse, (isCollapse) => {
    emit('changeCollapse', isCollapse)
})
</script>

<style lang="less" scoped>
// 面包屑
.breadcrumb {
    display: flex;
    align-items: center;
    color: #606266;

    .show_hide {
        margin-right: 20px;
        display: flex;
        align-items: center;

        .el-icon {
            transition: .5s all ease-out;
        }
    }
}
</style>